import React, {Component} from 'react';
import {Button, Card, Descriptions, Image, message} from 'antd';
import {reqImageDetail, reqDownloadImg} from '../../../api/picture';
import './detail.less';
import {
  ArrowLeftOutlined,
} from '@ant-design/icons';

// 图片详情页
export default class ImageDetail extends Component {
  state = {
    result: {}
  }

  getDetail = async () => {
   const id = this.props.match.params.id;
   try {
     const {data: result} = await reqImageDetail(id, {fields: 'recommend,download_infos,desc'});
     this.setState({result});
   } catch (e) {
     console.log(e);
     message.error(e.data.name || e.data.message || '请求错误!')
   }
  }
  // 返回
  backClick = () => {
    this.props.history.goBack()
  }
  componentDidMount() {
    this.getDetail();
  }

  downloadClick = async (idx) => {
    try {
      const {data: res} = await reqDownloadImg(idx);
      // 下载图片
      var eleLink = document.createElement('a');
      eleLink.download = res.url;
      eleLink.style.display = 'none';
      eleLink.href = res.url;
      document.body.appendChild(eleLink);
      eleLink.click();
      document.body.removeChild(eleLink);
      message.success('下载图片成功');
    } catch (e) {
      console.log(e);
      message.error('下载失败');
    }
  }

  render() {
    const {result} = this.state;
    const download_infos = result.download_infos;
    const recommend = result.recommend;
    const title = (
      <div className='title-wrap'>
        <Button icon={<ArrowLeftOutlined />} style={{border: 0,}} onClick={this.backClick}/>
        图片详情
      </div>
    )

    return (
      <Card title={title}>
        <Descriptions
          bordered
          labelStyle={{width: '120px'}}
          column={1}
        >
          <Descriptions.Item label="图片名">
            <a href={result.url} target='_blank' title={result.title} rel="noopener noreferrer">
              {result.title}
            </a>
          </Descriptions.Item>
          <Descriptions.Item label="地区">{result.area}</Descriptions.Item>
          <Descriptions.Item label="图片">
            {
              <Image src={result.image} width={200}/>
            }
          </Descriptions.Item>
          <Descriptions.Item label="版权">{result.copyright}</Descriptions.Item>
          <Descriptions.Item label="喜欢">{result.like_count}</Descriptions.Item>
          <Descriptions.Item label="浏览量">{result.user_watch}</Descriptions.Item>
          <Descriptions.Item label="描述">{result.desc}</Descriptions.Item>
          <Descriptions.Item label="下载链接">
            {
              download_infos && download_infos.length > 0 ? download_infos.map(item => {
                return (
                  <div className='download-item' key={item.url}>
                    <span className='download-item-txt'>
                      {item.txt}
                    </span>
                    <span className='download-item-url'>
                      {
                        item.url.indexOf('/') !== -1 ?
                          <a href={item.url} download>下载链接</a> :
                          <Button onClick={() => this.downloadClick(item.url)} style={{border: 0, color: '#1890FF'}}>下载链接</Button>
                      }
                    </span>
                  </div>
                )
              }) : null
            }
          </Descriptions.Item>
          <Descriptions.Item label="推荐" contentStyle={{display: 'flex'}}>
            {
              recommend && recommend.length > 0 ?
                recommend.map(item => {
                  return (
                    <div className='recommend_item' key={item._id}>
                      <Image src={item.image} alt={item.title} width={160}/>
                      <p>
                        <a href={'/admin/pictures/' + item._id}>{item.title}</a>
                      </p>
                    </div>
                  )
                }) : null
            }
          </Descriptions.Item>
          <Descriptions.Item label="发布时间">{result.add_time}</Descriptions.Item>
        </Descriptions>
      </Card>
    )
  }
}
